<template>
  <div>
    <div class="main_spac1" v-loading="loading">
      <!-- 日期选择 -->
      <div class="time_change">
        <change-date
          title="配送日期"
          @getdate="getdate"
          ref="time_change_ref"
        ></change-date>
        <div class="right_box"></div>
      </div>
      <!-- 利润 -->
      <div class="profit">
        <div class="left">
          <div style="width: 100%; height: 100%">
            <echart-funnel
              idname="profit_funl"
              :datalist="total_profit"
            ></echart-funnel>
          </div>
        </div>
        <div class="right">
          <div class="title" style="cursor: pointer; color: #8e8e8e">
            日利润
          </div>
          <div style="width: 100%; height: 100%">
            <echart-bar-complex
              idname="dayprofit"
              :datalist="day_profit"
            ></echart-bar-complex>
          </div>
        </div>
      </div>
      <!-- 排行榜 -->
      <div class="ranking">
        <div class="left">
          <div class="common_title">
            <div>
              <p>SKU TOP5</p>
            </div>
            <div>
              <el-select
                v-model.trim="sku_top5"
                size="mini"
                class="wid80"
                @change="(val) => typechange(val, 1)"
              >
                <el-option
                  v-for="(item, index) in select_list"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div style="width: 100%; height: 294px">
            <echart-barsimple
              idname="ranking1"
              :datalist="chart_sku_top5"
            ></echart-barsimple>
          </div>
        </div>
        <div class="middle">
          <div class="common_title">
            <div>
              <p>用户 TOP5</p>
            </div>
            <div>
              <el-select
                v-model.trim="user_top5"
                size="mini"
                class="wid80"
                @change="(val) => typechange(val, 2)"
              >
                <el-option
                  v-for="(item, index) in select_list"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div style="width: 100%; height: 294px">
            <echart-barsimple
              idname="ranking2"
              :datalist="chart_user_top5"
            ></echart-barsimple>
          </div>
        </div>
        <div class="right">
          <div class="common_title">
            <div>
              <p>大类 TOP5</p>
            </div>
            <div>
              <el-select
                v-model.trim="sort_percent"
                size="mini"
                class="wid80"
                @change="(val) => typechange(val, 3)"
              >
                <el-option
                  v-for="(item, index) in select_list"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div style="width: 100%; height: 294px">
            <echart-barsimple
              idname="ranking3"
              :datalist="cahrt_category_percent"
            ></echart-barsimple>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import changeDate from "./components/changeDate.vue";
import EchartBarComplex from "./components/echartBarComplex.vue";
import EchartBarsimple from "./components/echartBarsimple.vue";
import EchartFunnel from "./components/echartFunnel.vue";

import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { get_profit_chart } from "@/api/report/index";
import dateOption from "@/options/dateOption";

export default {
  components: {
    changeDate,
    EchartBarsimple,
    EchartFunnel,
    EchartBarComplex,
  },
  data() {
    return {
      dateOption,
      // 请求次数
      times: 1,
      loading: true,

      //时间
      date: "",
      date_type: "1",
      // 总数据
      profit_data: {},
      select_list: [
        {
          id: 1,
          name: "利润金额",
        },
        {
          id: 2,
          name: "利润率",
        },
      ],
      sku_top5: 1,
      user_top5: 1,
      sort_percent: 1,
      // sku_top5
      chart_sku_top5: {
        title: [],
        data: [],
        series: {
          name: "sku",
        },
      },
      // 商户top5
      chart_user_top5: {
        title: [],
        data: [],
        series: {
          name: "用户",
        },
      },
      // 各大类占比
      cahrt_category_percent: {
        title: [],
        data: [],
        series: {
          name: "大类",
        },
      },

      // 总利润
      total_profit: {
        legend_data: [],
        data: [],
        profit_rate: [],
      },
      // 日利润
      day_profit: {
        legend_data: ["配送金额", "成本金额", "利润金额"],
        x_data: [],
        series: [
          {
            name: "配送金额",
            data: [],
          },
          {
            name: "成本金额",
            data: [],
          },
          {
            name: "利润金额",
            data: [],
          },
        ],
      },
    };
  },
  watch: {
    date(val) {
      this.loading = true;
      this.get_profit_chart();
      this.times += 1;
      if (this.times != 2) {
      }
    },
  },
  methods: {
    // 请求数据
    get_profit_chart() {
      let date = this.$refs["time_change_ref"].$data.date;
      let date_type = this.$refs["time_change_ref"].$data.type;
      let params = {
        start_time: date[0],
        end_time: date[1],
        date_type: date_type,
        // start_time: "2020-11-01",
        // end_time: "2020-12-25",
      };
      this.sku_top5 = 1;
      this.user_top5 = 1;
      this.sort_percent = 1;

      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        params
      );
      get_profit_chart(data).then((res) => {
        if (res.errcode == 0) {
          this.profit_data = res.data;
          // 重置
          this.chart_user_top5.title = [];
          this.chart_user_top5.data = [];
          this.chart_sku_top5.title = [];
          this.chart_sku_top5.data = [];
          this.cahrt_category_percent.data = [];
          this.cahrt_category_percent.title = [];
          this.day_profit.x_data = [];
          this.day_profit.series[0].data = [];
          this.day_profit.series[1].data = [];
          this.day_profit.series[2].data = [];
          // sku_top5
          if (
            this.profit_data.goods_profit &&
            this.profit_data.goods_profit.length
          ) {
            this.profit_data.goods_profit.map((item) => {
              this.chart_sku_top5.title.push(item.goods_name);
              this.chart_sku_top5.data.push(item.profit);
            });
          }
          // user
          if (
            this.profit_data.company_profit &&
            this.profit_data.company_profit.length
          ) {
            this.profit_data.company_profit.map((item) => {
              this.chart_user_top5.title.push(item.company_name);
              this.chart_user_top5.data.push(item.profit);
            });
          }
          // 各大类占比
          if (
            this.profit_data.category_profit &&
            this.profit_data.category_profit.length
          ) {
            this.profit_data.category_profit.map((item) => {
              this.cahrt_category_percent.title.push(item.category_name);
              this.cahrt_category_percent.data.push(item.profit);
            });
          }

          // 总利润
          if (this.profit_data.order_unit) {
            let data = this.profit_data.order_unit;
            this.total_profit.legend_data = [
              "配送总额",
              "成本总额",
              "利润总额",
            ];
            this.total_profit.data = [
              { value: data.send_money, name: "配送总额" },
              { value: data.cost, name: "成本总额" },
              { value: data.profit, name: "利润总额" },
            ];
            this.total_profit.profit_rate = [
              "利润率：" + data.profit_rate + "%",
            ];
          }

          // 日利润
          if (this.profit_data.order_data) {
            let obj = this.profit_data.order_data;
            for (let key in obj) {
              this.day_profit.x_data.push(obj[key].date);
              this.day_profit.series[0].data.push(obj[key].send_money);
              this.day_profit.series[1].data.push(obj[key].cost);
              this.day_profit.series[2].data.push(obj[key].profit);
            }
          }
          this.loading = false;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 获取时间
    getdate(val) {
      this.date = val;
    },
    // 类型选择
    typechange(val, type) {
      switch (type) {
        case 1:
          // sku
          this.chart_sku_top5.title = [];
          this.chart_sku_top5.data = [];
          if (val == 1) {
            this.profit_data.goods_profit.map((item) => {
              this.chart_sku_top5.title.push(item.goods_name);
              this.chart_sku_top5.data.push(item.profit);
            });
            this.chart_sku_top5.series.name = "利润金额";
          } else if (val == 2) {
            this.profit_data.goods_profit_rate.map((item) => {
              this.chart_sku_top5.title.push(item.goods_name);
              this.chart_sku_top5.data.push(item.profit_rate);
            });
            console.log(this.profit_data.goods_profit_rate);
            this.chart_sku_top5.series.name = "利润率";
          }
          break;
        case 2:
          //用户
          this.chart_user_top5.title = [];
          this.chart_user_top5.data = [];
          if (val == 1) {
            this.profit_data.company_profit.map((item) => {
              this.chart_user_top5.title.push(item.company_name);
              this.chart_user_top5.data.push(item.profit);
            });
            this.chart_user_top5.series.name = "利润金额";
          } else if (val == 2) {
            this.profit_data.company_profit_rate.map((item) => {
              this.chart_user_top5.title.push(item.company_name);
              this.chart_user_top5.data.push(item.profit_rate);
            });
            this.chart_user_top5.series.name = "利润率";
          }
          break;
        case 3:
          // 分类
          this.cahrt_category_percent.title = [];
          this.cahrt_category_percent.data = [];
          if (val == 1) {
            this.profit_data.category_profit.map((item) => {
              this.cahrt_category_percent.title.push(item.category_name);
              this.cahrt_category_percent.data.push(item.profit);
            });
            this.cahrt_category_percent.series.name = "利润金额";
          } else if (val == 2) {
            this.profit_data.category_profit_rate.map((item) => {
              this.cahrt_category_percent.title.push(item.category_name);
              this.cahrt_category_percent.data.push(item.profit_rate);
            });
            this.cahrt_category_percent.series.name = "利润率";
          }
          break;
      }
    },
    // 日利润查看
    day_profit_see() {
      this.$router.push({
        name: "profit_report_day",
        params: {
          date: this.date,
        },
      });
    },
    sku_top_see() {
      this.$router.push({
        name: "profit_report_sku",
        params: {
          date: this.date,
        },
      });
    },
    user_top_see() {
      this.$router.push({
        name: "profit_report_user",
        params: {
          date: this.date,
        },
      });
    },
    category_top_see() {
      this.$router.push({
        name: "profit_report_category",
        params: {
          date: this.date,
        },
      });
    },
  },
  mounted() {
    this.get_profit_chart();
    // for (let index = 0; index < 50; index++) {
    //   this.table_list.push({ name: index });
    // }
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.time_change {
  background-color: #fff;
  width: 100%;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .right_box {
    padding: 0 15px;
  }
}
/* 利润 */
.profit {
  width: 100%;
  height: 414px;
  margin-top: 15px;

  display: flex;
  flex-direction: row;
  .left {
    flex: 4;
    margin: 0 15px 0 0;
    background-color: #fff;
  }
  .right {
    position: relative;
    flex: 6;
    background-color: #fff;
    .title {
      position: absolute;
      top: 22px;
      left: 20px;
      z-index: 150;
      span {
        padding-left: 25px;
      }
    }
  }
}

/* 排行榜 */
.ranking {
  margin-top: 15px;
  width: 100%;
  height: 344px;
  display: flex;
  flex-direction: row;
  .left,
  .middle,
  .right {
    flex: 1;
    background-color: #fff;
    height: 100%;
  }
  .middle {
    margin: 0 15px;
  }
}
.common_title {
  margin-top: 22px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  div {
    padding: 0 20px;
    &:first-child {
      p {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #8e8e8e;
        cursor: pointer;
        span {
          padding-left: 25px;
        }
      }
    }
    &:last-child {
      /deep/.el-input__inner {
        border: none;
      }
      /deep/.wid80 .el-input__inner {
        width: 94px;
      }
    }
  }
}
</style>
